<!-- 记录运动 -->
<template>
<div class="container">
    <div class="cancel" @click="$router.go(-1)">返回</div>
    <!-- 搜索框 -->
    <div class="search_box" @click="goSearch">
        <van-icon name="search" />
        输入关键词搜索对应运动项目
    </div>
    <!-- 食物列表 -->
    <div class="list">
        <ul class="sport_list">

            <li v-for="(item,index) in dataList" :key="item.id">
                <img :src="item.imgUrl" alt="">
                <div class="food_des">
                    <div>{{ item.name }}</div>
                    <div>{{item.cal}}千卡/{{ item.unit }}{{ item.unitText }}</div>
                </div>
                <van-icon name="add" color="#e88e61" size="20" @click="addItem(item)" />
            </li>

        </ul>
    </div>

    <!-- 记录食物、运动数量详情的组件 -->
    <recorditem v-if="showAddItem" :item="choosed" @changeShow="changeShow" />

</div>
</template>

<script>
import recorditem from 'components/record_item.vue'
import {
    apiRequest
} from '../../assets/js/axios_api'

export default {
    metaInfo() {
        return {
            title: '记录运动'
        }
    },
    name: 'RecSport',
    data() {
        return {
            userInfo: {},
            sportName: '',
            choosed: {},
            dataList: [],
            showAddItem: false,
        }
    },
    components: {
        recorditem
    },
    mounted() {
        this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.getDataList()
    },
    methods: {
        // 获取运动项
        getDataList() {
            apiRequest(this, 'sport/page', {
                limit: 2000,
                page: 1
            }, resData => {
                // 返回成功要做的事
                resData.list.forEach(element => {
                    this.dataList.push({
                        id: element.id,
                        name: element.sportName,
                        unit: element.duration,
                        cal: element.sportTrophy,
                        imgUrl: element.sportIconUrl,
                        unitText: '分钟'
                    })
                });
            }, 'get')
        },
        // 点击添加图标
        addItem($this) {
            this.choosed = {
                id: $this.id,
                itemName: $this.name,
                itemCal: $this.cal,
                itemUnit: $this.unit,
                unitText: $this.unitText,
                imgUrl: $this.imgUrl,
                type: 'sport'
            }
            this.showAddItem = true;
        },
        changeShow(flag) {
            this.showAddItem = flag;
        },
        goSearch() {
            this.$router.push({
                path: '/search',
                query: {
                    type: 'sport'
                }
            });
        },

    }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/common.less';

.container {
    background-color: @lightOrangeBg-color;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .cancel {
        padding: 1.5rem 1rem;
        font-size: 0.875rem;
        color: #888;
    }

    .search_box {
        position: absolute;
        top: 1rem;
        left: 3.75rem;
        right: 1rem;
        margin-bottom: 2rem;
        border: 0.0625rem solid @orange-color;
        border-radius: 0.5rem;
        text-align: center;
        padding: 0.625rem 0;
        font-size: 0.75rem;
        background-color: #fff;
    }

    .list {
        background-color: @lightOrangeBg-color;
        position: absolute;
        top: 5rem;
        left: 1rem;
        right: 1rem;
        bottom: 7.5rem;

        .sport_list {
            width: 100%;
            height: 100%;
            overflow: scroll;

            li {
                background-color: #fff;
                padding: 0.625rem;
                margin-bottom: 0.75rem;
                border-radius: 0.5rem;
                position: relative;

                img {
                    width: 3.125rem;
                    height: 3.125rem;
                }

                .food_des {
                    display: inline-block;
                    vertical-align: bottom;

                    div {
                        padding: 0.375rem 1.875rem;
                        font-size: 0.625rem;
                    }
                }

                .van-icon-add {
                    position: absolute;
                    right: 1rem;
                    top: 1.625rem;
                }
            }
        }
    }

    .btn {
        text-align: center;
        background-color: @orange-color;
        position: absolute;
        bottom: 3.125rem;
        left: 1rem;
        right: 1rem;
        padding: 0.875rem 0;
        color: #fff;
        border-radius: 2.5rem;
    }

}
</style>
